<template>
  <div class="login-box">
    <div class="login-illustration">
      <img src="~@/assets/images/login/Illustration.png" alt="" />
    </div>
    <transition name="bounce">
      <div v-if="islogin.islogin" key="logo" class="login-inner">
        <div class="login-inner-title">欢迎登录</div>
        <a-form layout="horizontal" :model="state.formInline" @submit.prevent="handleSubmit">
          <a-form-item>
            <a-input
              v-model:value="state.formInline.username"
              size="large"
              placeholder="请输入用户名"
            >
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input
              v-model:value="state.formInline.password"
              size="large"
              type="password"
              placeholder="请输入密码"
              autocomplete="new-password"
            >
            </a-input>
          </a-form-item>
          <!-- <a-form-item>
            <a-input v-model:value="state.formInline.verifyCode" placeholder="验证码" :maxlength="4">
              <template #prefix><SafetyOutlined /></template>
              <template #suffix>
                <img
                  :src="state.captcha"
                  class="absolute right-0 h-full cursor-pointer"
                  @click="setCaptcha"
                />
              </template>
            </a-input>
          </a-form-item> -->
          <!-- <a-form-item>
            <div class="forget-password" @click="forgotPassword">忘记密码？</div>
          </a-form-item> -->
          <a-form-item>
            <a-button type="primary" html-type="submit" size="large" :loading="state.loading" block>
              登录
            </a-button>
          </a-form-item>
        </a-form>
      </div>
      <forgot-form v-else key="forgot" @go-login="goLogin" />
    </transition>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs } from 'vue';
// import { SafetyOutlined } from '@ant-design/icons-vue';
import { useRoute, useRouter } from 'vue-router';
import { message, Modal } from 'ant-design-vue';
import forgotForm from './forgotForm.vue';
import { useUserStore } from '@/store/modules/user';
import { getImageCaptcha } from '@/api/login';
import { Storage } from '@/utils/Storage';
import { loginSys, getMenuTree, loginOut } from '@/api/system/user/index.ts';
import { ACCESS_TOKEN_KEY } from '@/enums/cacheEnum';
import { to } from '@/utils/awaitTo';
import { PUBLIC_KEY } from '@/utils/common';
import { JSEncrypt } from '@/utils/jsencrypt';

const state = reactive({
  loading: false,
  captcha: '',
  formInline: {
    // username: 'rootadmin',
    // password: '123456',
    username: '',
    password: '',
    // verifyCode: '',
    // captchaId: '',
  },
});
const islogin = reactive({ islogin: true });
const route = useRoute();
const router = useRouter();

const userStore = useUserStore();
const goLogin = () => {
  islogin.islogin = true;
};
const setCaptcha = async () => {
  const { img } = await getImageCaptcha({ width: 100, height: 50 });
  state.captcha = img;
  // state.formInline.captchaId = id;
};
// 图片验证码接口报错 屏蔽掉了
// setCaptcha();
// 忘记密码
const forgotPassword = () => {
  islogin.islogin = false;
};
const handleSubmit = async () => {
  const { username, password } = state.formInline;
  if (username.trim() == '' || password.trim() == '') {
    return message.warning('用户名或密码不能为空！');
  }
  // if (!verifyCode) {
  //   return message.warning('请输入验证码！');
  // }
  message.loading('登录中...', 0);
  state.loading = true;
  // params.password = md5(password)
  // 这里对接登录接口
  // const [err] = await to(userStore.login(state.formInline));
  var encrypt = new JSEncrypt();
  encrypt.setPublicKey(PUBLIC_KEY);
  let jmusername = encrypt.encrypt(state.formInline.username);
  let jmpassword = encrypt.encrypt(state.formInline.password);
  loginSys({
    username: jmusername,
    password: jmpassword,
  }).then((loginRes: any) => {
    // console.log("loginRes",loginRes);
    const { token, user } = loginRes;
    const ex = 7 * 24 * 60 * 60 * 1000;
    Storage.set(ACCESS_TOKEN_KEY, token, ex);
    Storage.set('USERINFO', JSON.stringify(user));

    getMenuTree({
      username: jmusername,
      password: jmpassword,
    }).then((sysMenu: any) => {
      // return
      // console.log("菜单权限列表",sysMenu);
      if (!sysMenu?.length) {
        sysMenu = [
          {
            children: null,
            code: '1007',
            createBy: '',
            createTime: '',
            icon: null,
            id: '1687265377756868609',
            isLeaf: null,
            name: '个人设置',
            pid: '1687264673709387778',
            pname: null,
            remark: '个人设置',
            sort: 7,
            status: 0,
            target: null,
            type: null,
            updateBy: '',
            updateTime: '',
            url: '#',
          },
        ];
      }
      Storage.set('MENULIST', JSON.stringify(sysMenu));
      setTimeout(() => {
        router.replace((route.query.redirect as string) ?? '/');
      }, 300);
    });
  });

  // return
  // if (err) {
  //   Modal.error({
  //     title: () => '提示',
  //     content: () => err.message,
  //   });
  //   setCaptcha();
  // } else {
  //   message.success('登录成功！');
  //   setTimeout(() => router.replace((route.query.redirect as string) ?? '/'));
  // }
  state.loading = false;
  message.destroy();
  return {
    ...toRefs(state),
  };
};
</script>

<style lang="less" scoped>
.login-box {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: url('~@/assets/images/login/bg.jpg');
  background-size: 100% 100%;
  overflow: hidden;
  .login-illustration {
    position: absolute;
    left: 12%;
    top: 18%;
    color: #2674df;
    width: 36vw;
    // margin-right: 5.2vw;
    animation: img-cartoon 2s infinite linear;
  }
  .login-inner {
    position: absolute;
    right: 10%;
    top: 18%;
    width: 32.81vw;
    background-color: rgba(15, 30, 54, 0.8);
    padding: 3.125vw;
    border-radius: 10px;
    .login-inner-title {
      font-size: 1.458vw;
      padding-bottom: 3.125vw;
      color: white;
    }
  }
  .forget-password {
    text-align: right;
    color: #73bbef;
    cursor: pointer;
  }
  :deep(.ant-form) {
    width: 100%;

    .ant-col {
      width: 100%;
    }

    .ant-form-item-label {
      padding-right: 6px;
    }
    .ant-input {
      height: 3vw;
      line-height: 3vw;
      background-color: rgba(15, 30, 54, 0);
      color: white;
    }
    .ant-btn {
      height: 3.64vw;
      background-color: #2674df;
    }
    .ant-input-affix-wrapper {
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: white;
      background-color: rgba(15, 30, 54, 0);
      border-radius: 4px;
    }
    .ant-form-item-control-input-content .ant-input.ant-input-lg {
      height: 3.64vw;
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: white;
      border-radius: 4px;
      line-height: 3.64vw;
    }
    svg {
      width: 20px;
    }
  }
}
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  // reverse
  animation: bounce-on 0.5s;
}
@keyframes bounce-in {
  0% {
    transform: translateY(1000px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes bounce-on {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(1000px);
  }
}
@keyframes img-cartoon {
  0% {
    opacity: 0.9;
    transform: translateY(0);
  }
  50% {
    opacity: 0.6;
    transform: translateY(20px);
  }
  100% {
    opacity: 0.9;
    transform: translateY(0);
  }
}
</style>
